import { Component } from 'vue'
import { NIcon } from 'naive-ui'
import type { MenuOption } from 'naive-ui'
import { RouterLink } from 'vue-router'
import {
  Accessibility,
  Book,
  Footsteps,
  ChatbubbleEllipsesSharp
} from '@vicons/ionicons5'
/**
 * 渲染图标为VNode
 * @param icon 图标组件
 * @returns
 */
function renderIcon(icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) })
}
/**
 * 转路由链接组件为VNode
 * @param link 路由path
 * @param label 显示文字
 * @returns Function
 */
function renderRouter(link = '', label = '') {
  return () => h(RouterLink, { to: { path: link } }, { default: () => label })
}
const menuOptions: MenuOption[] = [
  {
    label: renderRouter('/home', '我的首页'),
    key: 'my-home',
    disabled: false,
    show: true,
    icon: renderIcon(Accessibility)
  },
  {
    label: renderRouter('/home', '文章管理'),
    key: 'article-manage',
    disabled: false,
    icon: renderIcon(Book),
    children: [
      {
        label: renderRouter('/add-info', '新增文章'),
        key: 'add-article',
        link: '/home'
      },
      {
        label: '删除文章',
        key: 'del-article',
        link: '/home'
      },
      {
        label: '修改文章',
        key: 'edit-article',
        link: '/home'
      }
    ],
    link: '/home'
  },
  {
    label: '会员管理',
    key: 'member-manage',
    disabled: false,
    icon: renderIcon(Footsteps),
    link: '/home'
  },
  {
    label: '信息管理',
    key: 'info-manage',
    disabled: false,
    icon: renderIcon(ChatbubbleEllipsesSharp),
    link: '/home'
  }
]
export default menuOptions
